<!--
    action type定义的主体一般为modal，若action type无modal则type定义的主体为button
    为buttonPart与modalParet提供相同的action操作放方法继承，已达到统一控制的效果
    action的实际主体为action template，action主要是利用template的方法来操作状态
-->

<template>
    <div class="action-wrapper">
        <component :is="actionButtonComponent" class="action-button"></component>
        <component v-if="actionInfo.modal===false" :is="actionContentCode" :module="actionStoreCode"></component> 
        <div class="action-modal-box"  v-else>
            <Modal class="action-modal modal-full" :class="modalClass" v-model="actionModal" :width="setting.modalWidth">
                <div slot="header"><icon :type="model.icon" v-if="model.icon"></Icon>{{model.name}}</div>
                <component class="action-modal-content" :is="actionContentCode" :module="actionStoreCode"></component>   
                <div slot="footer" class="button-panel-button">
                  <i-button @click="actionCancel" type="text">取消</i-button>
                  <i-button @click="actionSubmit" :loading="posting" :disabled="!enableSubmit" type="primary">确认</i-button>
                </div>
            </Modal>
        </div>
    </div>
</template>
<script>
import $ from "@/common";
import ActionButton from "../actionButton";
import moduleStore from "./store";
export default {
  moduleStore,
  props: {
    code: {}
  },
  data() {
    return {};
  },
  watch: {
    modal(v) {
      if (!v) {
        this.actionCancel("cancel");
      }
    }
  },
  computed: {
    modalClass() {
      return {
        "modal-full": this.setting.fullModal
      };
    },
    actionContentCode() {
      return `action_${this.model.type}`;
    },
    actionStoreCode() {
      return `action_${this.model.code}`;
    },
    actionButtonComponent() {
      return "ActionButton";
    },
    extContentCode() {
      return "";
    },
    actionModal: {
      get() {
        return this.modal;
      },
      set(v) {
        this.setModal(v);
      }
    }
  },
  methods: {
    trunState(code, value) {
      this.setState({ code, value });
    },
    gettingContent() {
      //设置文件加载状态
      this.trunState("geting", true);
      //获取action内容文件
      return resolve =>
        require
          .ensure([], require => {
            resolve(require("action/type/" + this.model.type + ".vue"));
          })
          .then(() => {
            this.trunState("ready", true);
            this.trunState("geting", false);
          })
          .catch(() => {
            //文件加载失败状态
            this.trunState("get", false);
            this.trunState("gettingErorr", true);
          });
    }
  },
  created() {
    this.$collection = $.getParent(this, "actionCollection", true);
    this.$owner = this.$collection.$owner;
    this.setState({ code: "ownerStoreCode", value: this.$owner.$pathCode });
    this.setModel(this.$collection.actionMap[this.code]);
    this.pushStatus("wait");
    this.$options.components[
      `action_${this.model.type}`
    ] = this.gettingContent();
  },
  components: {
    ActionButton
  }
};
</script>
<style lang="less">
.action-wrapper {
  display: inline-block;
  margin-right: 5px;
}
.action-modal {
  .ivu-modal-header {
    font-size: 16px;
    .ivu-icon {
      margin-right: 8px;
    }
  }
}
</style>
